<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-09-17 9:52
  PageName：d_practice_table.html
  Function：实战案例 - 设计表格样式
  URL：http://localhost:8080/d8_practice_table/table.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计表格样式</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 10px 100px;
        }

        #wrap {
            width: 800px;
            margin: 10px auto;
            font-family: 'trebuchet MS', 'Lucida sans', Arial;
            font-size: 14px;
            color: #444;
        }

        /* 设计圆角效果 */
        table {
            *border-collapse: collapse; /* 兼容IE7及其以下版本浏览器 */
            border-spacing: 0;
            width: 100%;
        }

        /* 定制表格外框主题类样式 */
        /* 整个表格设置了边框，并设置了圆角 */
        .bordered {
            border: solid #ccc 1px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;

            /* 使用box-shadow制作表格的阴影 */
            -webkit-box-shadow: 0 1px 1px #ccc;
            -moz-box-shadow: 0 1px 1px #ccc;
            box-shadow: 0 1px 1px #ccc;
        }

        /* 使用transition制作hover过渡效果 */
        .bordered tr {
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }

        .bordered .highlight, .bordered tr:hover {
            background: #fbf8e9;
        }

        /* 统一单元格样式、定义边框、空隙效果 */
        .bordered td, .bordered th {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        /* 设计表格标题列样式，通过渐变效果设计标题列背景效果，并适当添加阴影，营造立体效果 */
        /* 使用gradient制作表头渐变色 */
        .bordered th {
            background-color: #dce9f9;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
            background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: linear-gradient(top, #ebf3fc, #dce9f9);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            border-top: none;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        }

        .bordered td:first-child, .bordered th:first-child {
            border-left: none;
        }

        /* 表格头部第一个th需要设置一个左上角圆角 */
        .bordered th:first-child {
            -moz-border-radius: 6px 0 0 0;
            -webkit-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
        }

        /* 表格头部最后一个th需要设置一个右上角圆角 */
        .bordered th:last-child {
            -moz-border-radius: 0 6px 0 0;
            -webkit-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
        }

        /* 表格最后一行的第一个td需要设置一个左下角圆角 */
        .bordered tr:last-child td:first-child {
            -moz-border-radius: 0 0 0 6px;
            -webkit-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
        }

        /* 表格最后一行的最后一个td需要设置一个右下角圆角 */
        .bordered tr:last-child td:last-child {
            -moz-border-radius: 0 0 6px 0;
            -webkit-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
        }
    </style>
</head>

<body>
<div id="wrap">
    <table class="bordered">

        <thead>
        <tr>
            <th>编号</th>
            <th>伪类表达式</th>
            <th>说明</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td colspan="3">简单的结构伪类</td>
        </tr>

        <tr>
            <td>1</td>
            <td>:first-child</td>
            <td>选择某个元素的第一个子元素。</td>
        </tr>

        <tr>
            <td>2</td>
            <td>:last-child</td>
            <td>选择某个元素的最后一个子元素。</td>
        </tr>

        <tr>
            <td>3</td>
            <td>:first-of-type</td>
            <td>选择一个上级元素下的第一个同类子元素。</td>
        </tr>

        <tr>
            <td>4</td>
            <td>:last-of-type</td>
            <td>选择一个上级元素的最后一个同类子元素。</td>
        </tr>

        <tr>
            <td>5</td>
            <td>:only-child</td>
            <td>选择的元素是它的父元素的唯一一个子元素。</td>
        </tr>

        <tr>
            <td>6</td>
            <td>:only-of-type</td>
            <td>选择一个元素是它的上级元素的唯一一个相同类型的子元素。</td>
        </tr>

        <tr>
            <td>7</td>
            <td>:empty</td>
            <td>选择的元素里面没有任何内容。</td>
        </tr>

        <tr>
            <td colspan="3">结构伪类函数</td>
        </tr>

        <tr>
            <td>8</td>
            <td>:nth-child()</td>
            <td>选择某个元素的一个或多个特定的子元素。</td>
        </tr>

        <tr>
            <td>9</td>
            <td>:nth-last-child()</td>
            <td>选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算。</td>
        </tr>

        <tr>
            <td>10</td>
            <td>:nth-of-type()</td>
            <td>选择指定的元素。</td>
        </tr>

        <tr>
            <td>11</td>
            <td>:nth-last-of-type()</td>
            <td>选择指定的元素，从元素的最后一个开始计算。</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>